<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage, ElMessageBox} from "element-plus";
import {useCounterStore} from "@/assets/counter-index.js";
const gs = useCounterStore();
//要使用ref将数组抱起来才能被vue管理
const personList = ref([])
//用来控制弹窗是否出现
const infoShow = ref(false);
const infoForm = ref({})
//真实环境中，这里应该是将id发生到后端的服务中，从数据库中删除数据
//filter函数中，如果为true,留下，如果为false，删除，我们的判断条件是不等于接受的id
//filter函数返回一个新的数组，我们将新的数组赋给personList
// personList.value = personList.value.filter(item => item.id !== id)
const remove = (id) => {
  axios.post('/person/remove',{id: id})
      .then((res)=>{
          //自动刷新数据
          listInfo() ;
          ElMessage({message:res.message,type:"success"})
      }).catch(error=>{
        ElMessage({message:error,type:"error"})
  })


}
//新增框消失
const openInfo = () => {
  infoForm.value = {};
  infoShow.value = true;
}

const editInfo = (id) => {
  //从数组中找到id等于接受的id的数据
  // const person = personList.value.find(item => item.id === id);
  axios.post('/person/info',{id: id})
      .then((res)=>{
        infoForm.value = {...res.data};
      }).catch(error=>{
        ElMessage({message:error,type:"error"})
  })
  infoShow.value = true;
}
const save = () => {
    //新增
    //模拟保存数据,从infoForm中获取数据复制给新的数组中
    // info.id = new Date().getTime();
  const info ={...infoForm.value};
    axios.post('/person/save',info).then((res)=>{
            //自动刷新数据
            listInfo() ;
            infoShow.value = false;
            ElMessage({message:res.message,type:"success"})
          }).catch(error=>{
      ElMessage({message:error,type:"error"})
    })
    // personList.value.push(info);
}
const requestBean = ref({pageNum:1,pageSize:5,total:5,params:{}})
const listInfo = () => {
  axios.post('/person/list', {...requestBean.value},)
      .then((res)=>{
          const pageInfo = res.data;
          personList.value = pageInfo.list;
          requestBean.value.total = parseInt(pageInfo.total)
      }).catch(error=>{
        ElMessage({message:error,type:"error"})
  })
}
//当前函数会在页面加载完成之后自动执行
onMounted(()=>{
  listInfo();
})
const selectImage = (options) => {
  // 上传图片,回显
  infoForm.value.surface = URL.createObjectURL(options.file);
  //上传图片至服务器（流传输）
  const file = options.file;
  //js中只能使用FormData来提交流数据
  const formData = new FormData();
  formData.append("files",file);
  axios.postForm('/file/upload',formData).then((res)=>{
    infoForm.value.surface = res.data;
  }).catch(error=>{
    ElMessage({message:error,type:"error"})
  })
}
</script>

<template>
  <div class="top">
    <el-button  type="primary" @click="openInfo">添加</el-button>
    <div>
      <el-input v-model="requestBean.params.title" clearable placeholder="请输入姓名" style="width: 150px; margin-right:0.5rem"></el-input>
      <el-input v-model="requestBean.params.age" type="number" clearable placeholder="请输入年龄" style="width: 150px; margin-right:0.5rem"></el-input>
      <el-select v-model="requestBean.params.gender" placeholder="请选择性别" style="width: 240px">
        <el-option label="男" value="男"/>
        <el-option label="女" value="女"/>
      </el-select>
      <el-button type="primary" @click="listInfo">查询</el-button>
    </div>
  </div>

  <el-table :data="personList" border style="width: 100%">
    <el-table-column prop="title" label="姓名" min-width="180"/>
    <el-table-column prop="surface" label="头像" min-width="180">
      <template #default="scope">
        <img v-if="scope.row.surface" :src="scope.row.surface" style="width: 80px; height: 80px; border-radius: 50%"/>
      </template>
    </el-table-column>
    <el-table-column prop="age" label="年龄" min-width="180"/>
    <el-table-column prop="gender" label="性别" min-width="180"/>
    <el-table-column prop="address" label="地址" min-width="280"/>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" type="primary" icon="Edit" @click="editInfo(scope.row.id)"></el-button>
        <el-button size="small" type="danger" icon="Delete" @click="remove(scope.row.id)"></el-button>
      </template>
    </el-table-column>
  </el-table>
  <div style="margin: 0.5rem">
    <el-pagination
        v-model:current-page="requestBean.pageNum"
        :page-size="requestBean.pageSize"
        layout="prev, pager, next,total"
        :total="requestBean.total"
        @current-change="listInfo"
        style="justify-content: center"
    />
  </div>

  <div>
    <el-dialog v-model="infoShow" title="详情" width="500">
      <el-form :model="infoForm">
        <el-form-item label="姓名" :label-width="100">
          <el-input v-model="infoForm.title" placeholder="请输入姓名"/>
        </el-form-item>
        <el-form-item label="头像" :label-width="100">
          <el-upload
              class="avatar-uploader"
              :show-file-list="false"
              :http-request="selectImage"
          >
            <img v-if="infoForm.surface" :src="infoForm.surface" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="年龄" :label-width="100">
          <el-input v-model="infoForm.age" type="number" placeholder="请输入年龄"/>
        </el-form-item>
        <el-form-item label="性别" :label-width="100">
          <el-select v-model="infoForm.gender" placeholder="请选择性别" style="width: 240px">
            <el-option label="男" value="男"/>
            <el-option label="女" value="女"/>
          </el-select>
        </el-form-item>
        <el-form-item label="地址" :label-width="100">
          <el-input v-model="infoForm.address" placeholder="请输入地址"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="infoShow = false">取消</el-button>
          <el-button type="primary" @click="save">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>


<style scoped>
.top{
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-content: center;
}
</style>

<style scoped>
.avatar-uploader .avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  text-align: center;
}
</style>